<script setup lang="ts">
import {
  onMounted,
  ref,
  computed,
  watch,
  onActivated,
  getCurrentInstance,
} from "vue";
import { Api } from "../../assets/api/api";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";

//主要数据
const mainData = ref<Array<Array<Object>>>([]);
//标题数据
const title = ref("");
//总章节
const theTotalSection = ref(0);
//选取章节
const selectIndex = ref(0);
//控制章节排序
const sort = ref(true);

//vue3自带方法
const router = useRouter();
const route = useRoute();
// 获取页面的实例对象
const pageInstance = getCurrentInstance();

// 获取主数据
const CatalogueDataGet = async () => {
  let id = route.params.id;
  let { data } = await Api.CatalogueUrl(id as any);
  title.value = data.data.book.title;
  theTotalSection.value = data.data.catalog.length;
  let end = 100;
  let arr = [];
  if (data.data.catalog[0].leaf == false) {
    data.data.catalog.splice(0, 1);
  }
  for (let i = 0; i < theTotalSection.value; i++) {
    if (i <= end) {
      arr.push({ ...data.data.catalog[i], index: i + 1 });
      if (arr.length == 100) {
        mainData.value.push(arr);
        arr = [];
        end += 100;
      } else if (i == theTotalSection.value - 1) {
        mainData.value.push(arr);
        arr = [];
      }
    }
  }
};
//控制章节数据
const selectChange = () => {
  selectIndex.value = pageInstance.refs.chapter.value * 1;
};
//控制正序反序
const sortChange = () => {
  mainData.value.reverse();
  sort.value = !sort.value;
};
//上下页
const pageDown = () => {
  if (selectIndex.value < mainData.value.length - 1) {
    selectIndex.value += 1;
  }
};
const pageUp = () => {
  if (selectIndex.value > 0) {
    selectIndex.value -= 1;
  }
};
//点击跳转小说页
const goLookBook = (id: any) => {
  router.push({
    name: "lookBook",
    params: {
      id: route.params.id,
    },
    query: {
      contentIndexid: id,
    },
  });
};

onMounted(() => {
  CatalogueDataGet();
});
</script>

<template>
  <div class="catalogue">
    <!-- 顶部 -->
    <nav>
      <div @click="$router.push('/')" class="app"></div>
      <h1>
        {{ title }}-目录
        <span>（共{{ theTotalSection }}章）</span>
      </h1>
      <div class="sourch">
        <p @click="router.push('/bookshelfv')">书架</p>
      </div>
    </nav>
    <!-- 章节select  -->
    <div class="select">
      <select ref="chapter" @change="selectChange">
        <option
          v-for="(item, index) in mainData"
          :key="item.index"
          :value="index"
        >
          {{ mainData[index][0].index }}-{{
            mainData[index][mainData[index].length - 1].index
          }}章
        </option>
      </select>
      <div class="button">
        <img
          v-if="sort"
          src="https://img.xmkanshu.com/operateimg/img/img/14742/14742.png"
          alt="img"
        />
        <img
          v-if="!sort"
          src="https://img.xmkanshu.com/operateimg/img/img/14743/14743.png"
          alt="img"
        />
        <span @click="sortChange">{{ sort ? "反序" : "正序" }}</span>
      </div>
    </div>
    <!-- 章节详情 -->
    <div class="chapter_details">
      <ul>
        <li
          @click="goLookBook(item.index)"
          v-for="item in mainData[selectIndex]"
          :key="item.index"
        >
          <p>{{ item.title.trim() }}</p>
          <img
            src="https://img.xmkanshu.com/operateimg/img/img/14744/14744.png"
            alt="img"
            v-if="item.price > 0 ? true : false"
          />
        </li>
      </ul>
    </div>
    <!-- 翻页 -->
    <div class="turn_pages">
      <div class="button" @click="pageUp">
        <span>上一页</span>
      </div>

      <div class="button" @click="pageDown">
        <span>下一页</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
nav {
  display: flex;
  justify-content: space-between;
  background-color: #f7f7f7;
  border-bottom: 1px solid #cbcbcb;
  .app {
    width: 17px;
    height: 17px;
    background: url("/public/img/home/left.png") no-repeat 12px 0px;
    background-size: 8px 13px;
    margin-top: 13px;
    padding-left: 11px;
    padding-right: 44px;
  }
  h1 {
    font-size: 17px;
    color: #333333;
    padding-top: 12px;
    padding-bottom: 10px;
    font-weight: normal;
    span {
      font-size: 12px;
      color: #000;
    }
  }
  .sourch {
    display: flex;
    width: 60px;
    padding-right: 12px;
    justify-content: flex-end;
    align-items: center;
    p {
      font-size: 12px;
      color: #999999;
    }
  }
}
.select {
  display: flex;
  font-size: 14px;
  color: #000;
  margin-top: 10px;
  padding: 0 10px;
  margin-bottom: 10px;
  select {
    width: 274px;
    height: 37px;
    border: 1px solid #c6c6c6;
    padding-left: 20px;
    outline: none;
    border-radius: 3px;
    margin-right: 5px;
  }
  .button {
    width: 70px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #c6c6c6;
    background-color: #fff;
    border-radius: 3px;
    img {
      margin-right: 10px;
      width: 8px;
      height: 12px;
    }
  }
}
.chapter_details {
  margin-bottom: 10px;
  ul {
    padding: 0 10px;
    background-color: #fff;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #efefef;
      padding-left: 6px;
      padding-right: 10px;
    }
  }
  li {
    & > p {
      font-size: 15px;
      color: #333333;
      max-width: 300px;
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    img {
      width: 13px;
      height: 13px;
    }
  }
}
.turn_pages {
  display: flex;
  justify-content: space-evenly;
  .button {
    width: 73px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #000;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #c6c6c6;
  }
  select {
    width: 191px;
    height: 36px;
    border: 1px solid #c6c6c6;
    padding-left: 20px;
    outline: none;
    border-radius: 3px;
  }
}
</style>